<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ page import="com.softserveinc.ita.kaiji.model.Card"%>
<%@ page import="java.util.Map"%>

<%
	Map<Card.DuelResult, Integer> statistic = (Map<Card.DuelResult, Integer>) request
			.getAttribute("statistic");
%>

<spring:message code="play-game.you" var="you" />
<spring:message code="play-game.enemy" var="enemy" />
<spring:message code="play-game.wins" var="wins" />
<spring:message code="play-game.ties" var="ties" />
<spring:message code="play-game.rock" var="rock" />
<spring:message code="play-game.paper" var="paper" />
<spring:message code="play-game.unknownCard" var="unknownCard" />
<spring:message code="play-game.scissors" var="scissors" />
<spring:message code="play-game.round" var="round" />
<spring:message code="play-game.winner" var="winner" />
<spring:message code="play-game.loser" var="loser" />
<spring:message code="play-game.draw" var="drawStatus" />
<spring:message code="play-game.gameOver" var="gameOver" />
<spring:message code="play-game.gameStart" var="gameStart" />
<spring:message code="play-game.newGame" var="newGame" />
<spring:message code="play-game.rules" var="rules" />

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Kaiji</title>

<link
	href="${pageContext.servletContext.contextPath}/resources/css/bootstrap.min.css"
	rel="stylesheet">

<style>
.card-count {
	background-color: #faebcc;
	width: 1em;
	padding: 4px;
	font-size: 10px display: inline-table;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px
}
</style>

<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="${pageContext.servletContext.contextPath}/resources/js/ie8-responsive-file-warning.js"></script><![endif]-->

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

	<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
					<a class="navbar-brand" href='<spring:url value="/" htmlEscape="true"/>'>
						Kaiji
					</a>
			</div>

			<ul class="nav navbar-nav navbar-right">

				<c:if test="${isFinished}">
					<li><a href="${pageContext.servletContext.contextPath}/game/new">${newGame }</a></li>
				</c:if>
				<li><a href="${pageContext.servletContext.contextPath}/">${rules }</a></li>
				<li><a href="${pageContext.servletContext.contextPath}/game/${gameId }/?lang=en">en</a></li>
				<li><a href="${pageContext.servletContext.contextPath}/game/${gameId }/?lang=ru">ru</a></li>
				
			</ul>
		</div>
	</div>

	<br>
	<br>
	<br>
	<br>
	<div class="container">
		<div class="row">
			<div class="col-md-4" style="height: 600px">
				<div class="row">
					<div class="col-md-12 alert alert-info"
						style="text-align: center; height: 30px; padding: 7px">
						${you }
						<c:if test="${isFinished}">
							- 
							<c:choose>
								<c:when test="${isPlayerWinner }">${winner }</c:when>
								<c:when test="${!isPlayerWinner && !isEnemyWinner }">${drawStatus}</c:when>
								<c:otherwise>${loser }</c:otherwise>
							</c:choose>
						</c:if>
					</div>
					<div class="row">
						<c:forEach var="entry" items="${playerDeck}" varStatus="status">
							<div class="col-md-4">
								<a
									href="${pageContext.servletContext.contextPath}/game/${gameId }/card/${entry.key }/"
									class="btn btn-primary
									<c:if test="${entry.value <= 0}">
									    disabled
									</c:if>"
									style="width: 100%"> <c:choose>
										<c:when test="${entry.key eq 'ROCK'}">
							${rock }
						</c:when>
										<c:when test="${entry.key eq 'PAPER'}">
							${paper }
						</c:when>
										<c:when test="${entry.key eq 'SCISSORS'}">
							${scissors }
						</c:when>
										<c:otherwise>
							${unknownCard }
						</c:otherwise>
									</c:choose> <span class="card-count" style="color: black">${entry.value}</span>
								</a>
							</div>
						</c:forEach>
					</div>
				</div>
				<div class="row" style="text-align: center">
					<br>
					<c:choose>
						<c:when test="${playerChosenCard eq 'ROCK'}">
							<img style="width: 100%"
								src="http://www.img.by/i/zQV0a.png">
						</c:when>
						<c:when test="${playerChosenCard eq 'PAPER'}">
							<img style="width: 100%"
								src="http://www.img.by/i/C5BtX.png">
						</c:when>
						<c:when test="${playerChosenCard eq 'SCISSORS'}">
							<img style="width: 100%"
								src="http://www.img.by/i/Ak8DV.jpg">
						</c:when>
					</c:choose>
				</div>
			</div>

			<div class="col-md-4">
				<div class="row">
					<div class="col-md-4">
						<div class="alert alert-warning"
							style="text-align: center; height: 30px; padding: 7px; margin-bottom: 0">
							${wins }</div>
						<div
							style="text-align: center; font-size: 35px; height: 75px; background-color: #fcf8f2; padding-top: 10px">
							<%=statistic.get(Card.DuelResult.WIN)%></div>
					</div>
					<div class="col-md-4">
						<div class="alert alert-warning"
							style="text-align: center; height: 30px; padding: 7px; margin-bottom: 0">
							${ties }</div>
						<div
							style="text-align: center; font-size: 35px; height: 75px; background-color: #fcf8f2; padding-top: 10px">
							<%=statistic.get(Card.DuelResult.DRAW)%></div>
					</div>
					<div class="col-md-4">
						<div class="alert alert-warning"
							style="text-align: center; height: 30px; padding: 7px; margin-bottom: 0">
							${wins }</div>
						<div
							style="text-align: center; font-size: 35px; height: 75px; background-color: #fcf8f2; padding-top: 10px">
							<%=statistic.get(Card.DuelResult.LOSE)%></div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<hr style="margin-bottom: 0">
					</div>
				</div>
				<div class="row">
					<div class="col-md-12" style="text-align: center;">
						<h2>
							<c:choose>
								<c:when test="${isFinished }">
      								${gameOver }
								</c:when>

								<c:when test="${fn:length(rounds) == 0}">
      								${gameStart }
								</c:when>

								<c:otherwise>
      								${round } ${fn:length(rounds)+1}
								</c:otherwise>
							</c:choose>
						</h2>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<hr style="margin-top: 10px">
					</div>
				</div>

				<c:if test="${fn:length(rounds) > 0}">

					<c:forEach var="j" begin="0" end="${fn:length(rounds) -1}" step="1">
						<c:set var="i" value="${fn:length(rounds) - j -1}" />

						<div class="row">
							<div class="col-md-3" style="text-align: center;">
								<c:choose>
									<c:when test="${rounds[i].getCard(player) eq 'ROCK'}">
										<img
											src="http://www.img.by/i/pFn9D.png"
											style="width: 20px">
									</c:when>
									<c:when test="${rounds[i].getCard(player) eq 'PAPER'}">
										<img
											src="http://www.img.by/i/LHmto.png"
											style="width: 20px">
									</c:when>
									<c:when test="${rounds[i].getCard(player) eq 'SCISSORS'}">
										<img
											src="http://www.img.by/i/XRgYE.png"
											style="width: 20px">
									</c:when>
								</c:choose>

								<c:if test="${rounds[i].getDuelResult(player) eq 'WIN'}">
									<a class="glyphicon glyphicon-ok"></a>
								</c:if>

							</div>
							<div class="col-md-6" style="text-align: center;">
								<span>${round } ${i+1}</span>
							</div>
							<div class="col-md-3" style="text-align: center;">

								<c:if test="${rounds[i].getDuelResult(enemyPlayer) eq 'WIN'}">
									<a class="glyphicon glyphicon-ok"></a>
								</c:if>

								<c:choose>
									<c:when test="${rounds[i].getCard(enemyPlayer) eq 'ROCK'}">
										<img
											src="http://www.img.by/i/pFn9D.png"
											style="width: 20px">
									</c:when>
									<c:when test="${rounds[i].getCard(enemyPlayer) eq 'PAPER'}">
										<img
											src="http://www.img.by/i/LHmto.png"
											style="width: 20px">
									</c:when>
									<c:when test="${rounds[i].getCard(enemyPlayer) eq 'SCISSORS'}">
										<img
											src="http://www.img.by/i/XRgYE.png"
											style="width: 20px">
									</c:when>
								</c:choose>

							</div>
						</div>

						<div class="row">
							<div class="col-md-12">
								<hr style="margin-top: 10px">
							</div>
						</div>
					</c:forEach>
				</c:if>

			</div>

			<div class="col-md-4" style="height: 600px">
				<div class="row">
					<div class="col-md-12 alert alert-danger"
						style="text-align: center; height: 30px; padding: 7px">
						${enemy }
						<c:if test="${isFinished}">
							 - 
							<c:choose>
								<c:when test="${isEnemyWinner }">${winner }</c:when>
								<c:when test="${!isPlayerWinner && !isEnemyWinner }">${drawStatus}</c:when>
								<c:otherwise>${loser }</c:otherwise>
							</c:choose>
						</c:if>
					</div>
					<div class="row">
						<c:forEach var="entry" items="${enemyDeck}" varStatus="status">
							<div class="col-md-4">
								<a href="./" class="btn btn-primary disabled"
									style="width: 100%"> <c:choose>
										<c:when test="${entry.key eq 'ROCK'}">
							${rock }
						</c:when>
										<c:when test="${entry.key eq 'PAPER'}">
							${paper }
						</c:when>
										<c:when test="${entry.key eq 'SCISSORS'}">
							${scissors }
						</c:when>
										<c:otherwise>
							${unknownCard }
						</c:otherwise>
									</c:choose> <span class="card-count"  style="color: black">${entry.value}</span>
								</a>
							</div>
						</c:forEach>
					</div>
				</div>
				<div class="row" style="text-align: center">
					<br>
					<c:choose>
						<c:when test="${enemyChosenCard eq 'ROCK'}">
							<img style="width: 100%"
								src="http://www.img.by/i/00xJG.jpg">
						</c:when>
						<c:when test="${enemyChosenCard eq 'PAPER'}">
							<img style="width: 100%"
								src="http://www.img.by/i/48JIE.jpg">
						</c:when>
						<c:when test="${enemyChosenCard eq 'SCISSORS'}">
							<img style="width: 100%"
								src="http://www.img.by/i/qt4Ef.jpg">
						</c:when>
					</c:choose>
				</div>
			</div>
		</div>
	</div>

	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script
		src="${pageContext.servletContext.contextPath}/resources/js/bootstrap.min.js"></script>
</body>
</html>